<template>
  <div class="box">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="li" v-for="item in list" :key="item.id">
        <img :src="item.food_cover_small" alt="" />
        <div class="info">
          <h3>
            {{ item.food_name }}
            <span v-if="item.food_alias">({{ item.food_alias }})</span>
          </h3>
          <div class="spanList">
            <p>
              <van-icon
                :color="
                  item.stage_one == 3
                    ? 'red'
                    : item.stage_one === 2
                    ? 'orange'
                    : '#1ec7af'
                "
                :name="
                  item.stage_one === 3
                    ? 'clear'
                    : item.stage_one === 2
                    ? 'warning'
                    : 'checked'
                "
              />
              {{ name1 }}
            </p>
            <p>
              <van-icon
                :color="
                  item.stage_three == 3
                    ? 'red'
                    : item.stage_three === 2
                    ? 'orange'
                    : '#1ec7af'
                "
                :name="
                  item.stage_three === 3
                    ? 'clear'
                    : item.stage_three === 2
                    ? 'warning'
                    : 'checked'
                "
              />
              {{ name2 }}
            </p>
            <p>
              <van-icon
                :color="
                  item.stage_two == 3
                    ? 'red'
                    : item.stage_two === 2
                    ? 'orange'
                    : '#1ec7af'
                "
                :name="
                  item.stage_two === 3
                    ? 'clear'
                    : item.stage_two === 2
                    ? 'warning'
                    : 'checked'
                "
              />
              {{ name2 }}
            </p>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script setup>
let props = defineProps(["spanList"]);
import { contactCardProps } from "vant";
import { ref, watch } from "vue";
import { onBeforeRouteUpdate } from "vue-router";
import { getEats } from "../../API";
import { useCount } from "../../store/index";
let store = useCount();

let list = ref([]);
const loading = ref(true);
const finished = ref(false);
let class_id = ref(store.params.Nbnc_id);
let stage = ref(store.params.stage);
let stage_value = ref(store.params.stage_value);
let food_category_id = ref(store.params.food_category_id);
let page = 1;
let name1 = ref(props.spanList[0]);
let name2 = ref(props.spanList[1]);
let name3 = ref(props.spanList[2]);

let getFood = async () => {
  loading.value = true;
  let { data } = await getEats({
    class_id: class_id.value,
    stage: stage.value,
    stage_value: stage_value.value,
    food_category_id: food_category_id.value,
    page,
  });
  list.value.push(...data.data.list);
  // console.log(list.value);
  loading.value = false;
  finished.value = !data.data.list.length;
};
getFood();
let initRequest = () => {
  page = 1;
  getFood();
};
onBeforeRouteUpdate(() => {
  initRequest();
});
// 触底加载
let onLoad = () => {
  page++;
  getFood();
};
watch(
  () => [store.params.Nbnc_id, store.params.stage, store.params.stage_value],
  ([oldClassId, oldStage, oldStageValue]) => {
    // console.log(oldClassId, oldStage, oldStageValue);
    class_id.value = store.params.Nbnc_id;
    stage.value = store.params.stage;
    stage_value.value = store.params.stage_value;
    list.value = [];
    initRequest();
  },
  { immediate: true }
);
</script>
<style scoped>
.box {
  width: 100%;
}
.li {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #efefef;
}
.li img {
  width: 148px;
  height: 148px;
  margin-right: 20px;
}
.info {
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info h3 {
  width: 100%;
  box-sizing: border-box;
  font-size: 32px;
  display: flex;
  align-items: center;
}
.info span {
  width: 66%;
  margin-left: 20px;
  font-weight: normal;
  color: #767676;
  font-size: 26px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.spanList {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  font-size: 26px;
}
</style>